<template>
  <!-- 轮播新闻 -->
  <div class="news_list">
    <div class="container">
      <h1 class="title">{{ ldata.theme }}</h1>
      <div class="types">
        <p>全部</p>
        <p>whatsapp</p>
        <p>Facebook</p>
        <p>51客服系统</p>
      </div>
      <div class="carouse_wrap">
        <!-- 套一层好在外面隐藏掉滚动条 -->
        <div
          class="scroll_wrp"
          :style="{ transform: 'translateX(' + offx + 'px)' }"
        >
          <at-card
            v-for="(item, index) in ldata.list"
            :key="index"
            :ndata="item"
          ></at-card>
        </div>
      </div>
      <div class="more">
        <a href="">查看更多</a>
        <span class="el-icon-right"></span>
      </div>
    </div>
  </div>
</template>

<script>
import atCard from "@/components/atcard";

export default {
  components: { atCard },
  props: ["ldata"],
  data() {
    return {
      offx: 0,
      tickindex: 0,
      rownum: 3, //一排能放几个完整的
      itemWidth: 312, //子项目的宽度
    };
  },
  mounted() {
    if (this.ldata.list.length > this.rownum) {
      setInterval(() => {
        this.tickindex++;
        if (this.tickindex <= this.ldata.list.length - this.rownum) {
          this.offx -= this.itemWidth; //向左
        } else {
          this.offx += this.itemWidth; //向右
        }
        if (this.tickindex >= (this.ldata.list.length - this.rownum) * 2) {
          this.tickindex = 0;
        }
      }, 5000);
    }
  },
  methods: {},
};
</script>

<style scoped>
.title {
  height: 62px;
  line-height: 62px;
  color: #1d2845;
  font-size: 30px;
  font-weight: bold;
}
.types {
  display: flex;
}
.types p {
  color: #777;
  padding: 30px 40px;
}
.news_list {
  background: #f8f8f8;
  font-size: 14px;
  padding: 40px 0;
}
.container {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.carouse_wrap {
  overflow: hidden;
  cursor: pointer;
}
.scroll_wrp {
  white-space: nowrap;
  transition: transform 0.6s ease-in-out;
}
.more {
  text-align: right;
  line-height: 70px;
  color: #077af1;
}
.more a {
  color: #077af1;
}

</style>